import { Fragment } from '@/components/Fragment'; 
import {
  Tabs,
  TabItem,
  Flex,
  Text,
  IconEmail,
  Badge,
} from '@aws-amplify/ui-react';
import { TabsDemo } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import {
  AriaLabel,
  BadgeIcons,
  BasicTabs,
  ControlledTabExample,
  DataAttributeStyles,
  DefaultTabUncontrolled,
  DisabledTabs,
  IndicatorPosition,
  JustifyContent,
  OverrideStyleClasses,
  PseudoStyles,
  Spacing,
  StyleProps,
  TabsThemeExample,
  Title,
} from './examples';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

## Demo

<TabsDemo />

## Usage

Import the `Tabs` and `TabItem` components.

<Example>
  <BasicTabs />
  <ExampleCode>
    ```jsx file=./examples/BasicTabs.tsx

    ```

</ExampleCode>
</Example>

The `Tabs` component accepts `TabItems` as children. Each `TabItem` contains both the Tab's `title` and its corresponding content panel (children). Children passed to `TabItem` are responsible for their own styling.

### Default Tab (uncontrolled)

In the `Tabs` component, use the `defaultIndex` prop to change which Tab content is initially displayed. Pass in the index of the Tab you wish to show. The default is index 0 (the first tab).

<Example>
  <DefaultTabUncontrolled />
  <ExampleCode>
    ```jsx file=./examples/DefaultTabUncontrolled.tsx

    ```

</ExampleCode>
</Example>

### Current Index and onChange (controlled)

The tabs component also works as a controlled component. This allows you to programmatically set the current tab

<Example>
  <ControlledTabExample />
  <ExampleCode>
    ```jsx file=./examples/ControlledTabExample.tsx

    ```

</ExampleCode>
</Example>

### Grow

In the `Tabs` component, use the `spacing` prop to control how Tabs take up the remaining space. Pass `equal` to make each tab take up the same amount of space, and `relative` to make each tab take up space relative to the size of its title.

<Example>
  <Spacing />
  <ExampleCode>
    ```jsx file=./examples/Spacing.tsx

    ```

</ExampleCode>
</Example>

### Justify Content

In the `Tabs` component, use the `justifyContent` prop to control how space is distributed between and around the Tabs. Available options include `flex-start` (default), `flex-end`, `center`, `space-between`, `space-around`, and `space-evenly`.

Note: this prop only has an effect if the `spacing` prop is not set, otherwise the `spacing` prop will take precedence.

<Example>
  <JustifyContent />
  <ExampleCode>
    ```jsx file=./examples/JustifyContent.tsx

    ```

</ExampleCode>
</Example>

### Title

In the `TabItem` component, use the **required** `title` prop to change the title corresponding with each Tab's content panel. For styling purposes, you may pass your own custom component if you wish.

<Example>
  <Title />
  <ExampleCode>
    ```jsx file=./examples/Title.tsx

    ```

</ExampleCode>
</Example>

You can also add badges and icons in the `TabItem` by passing custom components to the `title` prop.

<Example>
  <BadgeIcons />
  <ExampleCode>
    ```jsx file=./examples/BadgeIcons.tsx

    ```

</ExampleCode>
</Example>

### Indicator Position

You can change the position of the tab border and current tab indicator with the `indicatorPosition` prop. The only values are `top` or `bottom` (default).

<Example>
  <IndicatorPosition />
  <ExampleCode>
    ```jsx file=./examples/IndicatorPosition.tsx

    ```

</ExampleCode>
</Example>

### Disabled Tabs

In the `TabItem` component, use the `isDisabled` prop to make a Tab not clickable and its content not visible to the user.

<Example>
  <DisabledTabs />
  <ExampleCode>
    ```jsx file=./examples/DisabledTabs.tsx

    ```

</ExampleCode>
</Example>

## CSS Styling

<ThemeExample component="Tabs">
  <Example>
    <TabsThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/TabsThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Tabs" />

### Global styling

To override styling on all `Tabs` or `TabItems`, you can set the Amplify CSS variables, use the built-in `.amplify-tabs` or `.amplify-tabs-items`classes, or use pseudo-classes.

Note that children of `TabItem` must be responsible for their own styling.

<Example className="global-tabs-example">
  <BasicTabs />
  <ExampleCode>
    ```css
    /* styles.css */
    [data-amplify-theme] {
      /* background for the whole tab bar */
      --amplify-components-tabs-background-color: var(
        --amplify-colors-background-secondary
      );
      /* background for each tab */
      --amplify-components-tabs-item-background-color: var(
        --amplify-colors-background-primary
      );
    }
    /* OR */
    .amplify-tabs {
      background-color: var(--amplify-colors-background-secondary);
    }

    .amplify-tabs-item {
      background-color: var(--amplify-colors-background-primary);
    }
    ```

</ExampleCode>
</Example>

#### Using pseudo-classes

<Example className="pseudo-demo">
  <PseudoStyles />
<ExampleCode>
```css
/* styles.css */
.amplify-tabs-item:hover {
  background-color: var(--amplify-colors-background-primary);
  border-color: var(--amplify-colors-purple-60);
}

.amplify-tabs-item[data-state='active'] {
background-color: var(--amplify-colors-background-primary);
border-color: var(--amplify-colors-pink-60);
}

.amplify-tabs-item:focus {
background-color: var(--amplify-colors-pink-10);
}

````
</ExampleCode>
</Example>

To replace the Tabs styling, unset it:

```css
.amplify-tabs {
  all: unset;
  /* Add your styling here*/
}

.amplify-tabs-items {
  all: unset;
  /* Add your styling here*/
}
```

### Local styling

To override styling on a specific `Tabs` or `TabItem` component, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

#### Using a class selector

<Example>
  <OverrideStyleClasses />
  <ExampleCode>
```css
/* styles.css */
.custom-tabs {
  background-color: var(--amplify-colors-brand-primary-60);
  justify-content: center;
  border-color: transparent;
}

.custom-tab-item {
background-color: var(--amplify-colors-brand-primary-80);
color: var(--amplify-colors-font-inverse);
border-color: transparent;
}

.custom-tab-item:hover {
color: var(--amplify-colors-font-inverse);
background-color: var(--amplify-colors-brand-primary-90);
}

.custom-tab-item[data-state='active'] {
color: var(--amplify-colors-font-inverse);
border-color: transparent;
background-color: var(--amplify-colors-brand-primary-100);
}

````
  </ExampleCode>
</Example>

#### Using data attributes

<Example className="tabs-data-demo">
  <DataAttributeStyles />
  <ExampleCode>
```css
/* styles.css */
/* When a Tab is selected and displaying its corresponding content panel */
.amplify-tabs-item[data-state='active'] {
  background-color: var(--amplify-colors-brand-primary-20);
}

/* When a Tab is disabled */
.amplify-tabs-item[data-disabled] {
  background-color: var(--amplify-colors-background-tertiary);
}
```

  </ExampleCode>
</Example>

#### Using style props

<Example>
  <StyleProps />
  <ExampleCode>
    ```jsx file=./examples/StyleProps.tsx

    ```

</ExampleCode>
</Example>

Note: there is currently no way to style different states like hover using only style props. However Amplify UI works well with CSS in JS frameworks for this usecase. Take a look at the [alternative styling docs](/guides/css-in-js) for information how to use CSS in JS with Amplify UI.

## Accessibility

Adheres to the [Tabs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).

We recommend passing an `ariaLabel` prop to help enable assistive technology.

<Example>
  <AriaLabel />
  <ExampleCode>
    ```jsx file=./examples/AriaLabel.tsx

    ```

</ExampleCode>
</Example>